<template>
  <div class="assess-body">
    <div>
      <span class="resume-price">简历专业评分： 39分</span>
      <button class="right-btn">检查</button>
    </div>
    <span class="lable-region">你超越了95%的同学哦</span>
    <div style="height: 120px">
      <!-- todo -->
      <div class="add-text">
        <p>添加文字</p>
        <p class="right-label">39/40</p>
        <div>
          <p class="progress-base top-1"></p>
          <p class="progress-base progress"></p>
        </div>
      </div>

      <div class="add-text">
        <p>添加文字</p>
        <p class="right-label">36/40</p>
        <div>
          <p class="progress-base top-2"></p>
          <p class="progress-base progress"></p>
        </div>
      </div>

      <div class="add-text">
        <p>添加文字</p>
        <p class="right-label">32/40</p>
        <div>
          <p class="progress-base top-3"></p>
          <p class="progress-base progress"></p>
        </div>
      </div>
    </div>

    <p class="bottom-line"></p>

    <ul>
      <li>
        <p
          class="guide-title"
          style="border-left: 4px rgba(255, 207, 112, 1) solid"
        >
          行动指导
        </p>
        <p class="guide-1 base-color">
          <span>行动指导1：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
        <p class="guide-1 base-color">
          <span>行动指导1：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
      </li>

      <li>
        <p
          class="guide-title"
          style="border-left: 4px rgba(245, 114, 255, 1) solid"
        >
          量化影响
        </p>
        <p class="guide-1 base-color">
          <span>量化影响1：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
        <p class="guide-1 base-color">
          <span>量化影响2：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
      </li>

      <li>
        <p
          class="guide-title"
          style="border-left: 4px rgba(112, 222, 188, 1) solid"
        >
          避免赘述
        </p>
        <p class="guide-1 base-color">
          <span>避免赘述1：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
        <p class="guide-1 base-color">
          <span>避免赘述2：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
      </li>

      <li>
        <p
          class="guide-title"
          style="border-left: 4px rgba(168, 255, 112, 1) solid"
        >
          剔除填充词
        </p>
        <p class="guide-1 base-color">
          <span>剔除填充词1：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
        <p class="guide-1 base-color">
          <span>剔除填充词1：运营等部门协同讨论图像处理小程序的优化等工作</span>
        </p>
        <p class="guide-1">
          <span>建议修改：拉新留存+解释文字</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { Slider } from "ant-design-vue";

export default {
  components: {
    "a-slider": Slider,
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang='scss' scoped>
.assess-body {
  padding: 10px 16px;
  position: relative;

  p {
    padding: 0;
    margin: 0;
  }

  .resume-price {
    font-size: 13px;
  }

  .right-btn {
    position: absolute;
    right: 16px;
    top: 16px;
    background-color: rgba(255, 32, 26, 1);
    width: 60px;
    padding: 2px;
    color: #fff;
    border: none;
    border-radius: 4px;
    float: right;
  }

  .add-text {
    display: flex;
    position: relative;
    margin: 10px 0;
  }

  .right-label {
    position: absolute;
    top: -5px;
    right: 10px;
  }

  .top-progress {
    position: relative;
  }

  .progress-label {
    position: absolute;
    right: 5px;
    top: 0;
  }

  .top-1 {
    width: 300px;
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  }

  .top-2 {
    width: 260px;
    background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  }

  .top-3 {
    width: 200px;
    background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  }

  .progress-base {
    height: 12px;
    margin-left: 12px;
    border-radius: 10px;
  }

  .progress {
    width: 360px;
    background-color: #f5f5f5;
  }

  .lable-region {
    font-size: 12px;
    color: #4d546d;
    background-color: #f5f5f5;
  }

  ul {
    padding: 0 12px;
    margin: 0;
    p {
      padding: 0;
      margin: 0;
    }
  }

  li {
    list-style: none;
    padding: 5px 0;
    margin: 10px 0;

    .guide-title {
      text-align: left;
      font-family: Microsoft YaHei;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      color: rgba(77, 84, 109, 1);

      padding-left: 12px;
      margin-bottom: 16px;
    }

    .guide-1 {
      margin: 5px 0;
      font-size: 14px;
      color: #666666;
    }

    .base-color {
      color: #999999;
    }
  }

  span::selection {
    background-color: gold;
    font-family: Microsoft YaHei;
    font-size: 14px;
  }

  .bottom-line {
    width: 100%;
    height: 1px;
    margin-right: 100px;
    margin: 0 auto;
    background-color: #4d546d;
  }
}
</style>